<template>
    <div class="Login">
        <div class="login-container"> 
          <div class="img"></div> 
          <el-form :model="form" :rules="rules" ref="form" label-width="80px" class="form">
              <el-form-item label="用户名 :" prop="username">
                <el-input v-model="form.username"></el-input>
              </el-form-item>
              <el-form-item label="密码 :" prop="password">
                <el-input type="password" v-model="form.password"></el-input>
              </el-form-item> 
         </el-form>
         <el-button type="primary" class="btn" @click="submitForm('form')">登录</el-button>
        </div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        form: {
          username: '',
          password: ''
        },
        rules: {
          username: [
            { required: true, message: '请输入用户名', trigger: 'blur' }, 
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' }, 
          ]
        }
      }
    },
    created(){
     
    },  
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => { 
          if (valid) {
              this.$router.push({name:'Home'}) 
          } else {
              this.$message.error('表单验证失败,请检查');
              return false;
          }
        });
      }
    }
  }
  </script>
  
  <style scoped lang="scss">
  .Login{
    height: 100vh;
    width: 100vw;
    background-color: #f5f5f5;
    box-sizing: border-box;
    position: relative;
    .login-container {  
      box-shadow:  0 0 12px 0 rgba(0,0,0,.2);
        position: absolute;
        padding: 20px;
        border: 1px solid #ccc;
        width: 300px;
        height: 344px;
        border-radius: 8px;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        flex-direction: column;
        align-items: center; 
        background-color: #f5f5f5;
        .img{
          height: 100px;
          width: 100px;
          border-radius: 50%; 
          overflow: hidden;
          box-sizing: border-box;
          background: url('@/assets/loginLogo.jpeg') no-repeat center;
          background-size: cover;
          margin-bottom: 20px;
        }
        .form{
           transform: translateX(-12px);  
        }
        .btn{
               position: absolute;
               left: 50%;
               top: 74%;
               width: 28%;
               transform: translate(-50%, -3%);
           }
    }
  } 
   
    .el-form-item__label { color: #606266; } /* 修改表单标签的颜色 */
    .el-input__inner { background-color: #fff; } /* 修改输入框背景色 */
    .el-input__inner::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: #c4c4c4; } /* 修改输入框占位符颜色 */
    .el-input__inner::-moz-placeholder { /* Firefox 19+ */ color: #c4c4c4; } /* 修改输入框占位符颜色 */
    .el-input__inner:-ms-input-placeholder { /* IE 10+ */ color: #c4c4c4; } /* 修改输入框占位符颜色 */
    .el-input__inner::placeholder { color: #c4c4c4; } /* 修改输入框占位符颜色 */
  </style>